<template>
<!-- 群公告 -->
  <div class="notice-container">
    <div class="backbar">
      <div class="back" v-hammer:tap="(ev) => $router.push({name: 'GroupSetting'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>
    <!-- 发布人信息 -->
    <!-- <div class="publisher flex-center">
      <div class="icon">
        <img :src="groupNotice.headUrl" alt="">
      </div>
      <div class="info flex-center column">
        <div class="name">
          {{ groupNotice.publisher }}
        </div>
        <div class="time">
          {{ groupNotice.createTime }}
        </div>
      </div>
    </div> -->
    <div class="content">
        <p v-if="isEdit">{{ groupNotice.notice ? groupNotice.notice : '暂无公告' }}</p>
        <cube-textarea id="noticeInput" v-else v-model="groupNotice.newNotice" placeholder="请输入群公告"></cube-textarea>
    </div>


    <div class="action">
      <div class="no-edit" v-if="!allowEdit">
        - 只有群主和管理员可编辑 -
      </div>

      <div class="edit flex-center" v-else>
        <cube-button primary @click="onEdit" v-if="isEdit">
          编辑
        </cube-button>
        <cube-button primary @click="onConfirm" v-else>
          确认
        </cube-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { Webim } from '@/utils/types';
import { DIALOGUE, ImClient, MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');

@Component<GroupNotice>({
  mixins: [MessageMixin],
})
export default class GroupNotice extends Vue {

  @chatModule.State("groupSetting") groupSetting: any;

  private eventList: Array<string> = [
    "$updateGroupSetting",
  ];

  private groupNotice: any = {
    publisher: '不是的减肥',
    createTime: '2019023',
    headUrl: 'http://img2.imgtn.bdimg.com/it/u=265535345,1890400617&fm=26&gp=0.jpg',
    content: '活动火热进行中',
    newContent: '活动火热进行中',
  };

  private allowEdit: boolean  = true;

  private isEdit: boolean = true;

  protected mounted() {
    this.initEvents(this.eventList);

    this.allowEdit = this.groupSetting.status === 1 || this.groupSetting.status === 2;

    this.groupNotice.notice = this.groupNotice.newNotice = this.groupSetting.notice;

  }


  private onEdit() {
    this.isEdit = !this.isEdit;
  }


  private onConfirm() {
    this.sendMessage(MsgTypeKV.updateGroupSetting, {
      info: this.groupSetting.info,
      notice: this.groupNotice.newNotice
    });
  }

  /**
   * 更新群设置
   */
  private $updateGroupSetting(data: any) {
    if (data.result === 0) {
      this.$createToast({
        txt: data.message,
        type: "correct",
        time: 3000,
      }).show();
      this.isEdit = true;
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }


}
</script>

<style lang="stylus" scoped>
.notice-container
  width 100%
  height 100%
  overflow-x hidden
  overflow-y auto
  position relative
  .publisher
    height 56px
    width 100%
    border-bottom 1px solid #d0d0d0
    .icon
      flex-basis 10%
      img 
        width 48px
        height 48px
        border-radius 8px
    .info
      font-size 14px
      flex-basis 90% 
  .content
    margin-top 30px
    font-size 20px 
    padding 8px
  .action
    position absolute
    width 100%
    height 48px
    left 0
    bottom 0
    .no-edit
      text-align center
      font-size 13px
      color #909090
    .edit
      width 100%
      text-align center
      .cube-btn 
        width 100px
        padding 8px 4px

</style>

